<div>
    <div id="content-md" appEditorMd [editormdConfig]="conf" (onEditorChange)="syncContent($event)">
        <textarea style="display: block" [(ngModel)]="content"></textarea>
    </div>

    <div class="clearfix">
        <nz-upload nzAction="/images/upload" nzFileType="image/png,image/jpeg,image/gif,image/bmp"
            nzListType="picture-card" [(nzFileList)]="fileList" [nzShowButton]="fileList.length < 10"
            [nzPreview]="handlePreview" (nzChange)="uploadChange($event)" [nzWithCredentials]="true">
            <div>
                <i nz-icon nzType="plus"></i>
            </div>
        </nz-upload>
        <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null"
            (nzOnCancel)="previewVisible = false">
            <ng-template #modalContent>
                <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
            </ng-template>
        </nz-modal>
    </div>

    <div class="tool-bar">
        <button nz-button nzType="primary" nzShape="circle">
            <i nz-icon nzType="picture" nzTheme="outline"></i>
        </button>
        <button nz-button nzType="primary" [disabled]="!!content" nzShape="round" (click)="send()">发送</button>
    </div>
</div>

<nz-tabset>
    <nz-tab nzTitle="Tab 1">
        <app-discover-content-list [list]="list"></app-discover-content-list>
    </nz-tab>
    <nz-tab nzTitle="Tab 2">
        <app-discover-content-list [list]="list"></app-discover-content-list>
    </nz-tab>
    <nz-tab nzTitle="Tab 3">
        <app-discover-content-list [list]="list"></app-discover-content-list>
    </nz-tab>
</nz-tabset>